import { Component } from 'react';
import './ListCome.scss';
import { BsXLg } from 'react-icons/bs';
class ListCom extends Component {
  state = {};
  render() {
    const { listArr, delReview } = this.props;
    return (
      <>
        <main className="list">
          <ul>
            {listArr.length ? (
              listArr.map((item, index) => (
                <li key={index}>
                  <h2>评论人：{item.critic}</h2>
                  <p>评论内容：{item.content}</p>
                  <BsXLg
                    onClick={() => delReview(index)}
                    className="icon-del"
                  />
                </li>
              ))
            ) : (
              <h1>评论区空空如也~</h1>
            )}
          </ul>
        </main>
      </>
    );
  }
}

export default ListCom;
